طراحی سایت واکنش گرا (Responsive Web Design)

حامد 
  بازدید : 17
چهارشنبه 16 آذر 1401 زمان : 9:12 


1
2
3
4
5

طراحی وب ریسپانسیو یا این که عکس العمل‌‌ گرا چیست؟ چرا مدتی میباشد ریسپانسیو بودن سایت بسیار اساسی گردیده است و تمامی از عکس العمل گرایی وبسایت صحبت می زنند؟ وب سایت‌های ریسپانسیو چه خصوصیت‌ها و مزیت‌هایی دارا هستند که آن‌ها‌را از وب سایت‌هایی که ریسپانسیو نیستند غیر وابسته می‌نماید؟ بدین پرسش‌های اصلی در اینترنت طراحی صفحه درین نوشته‌ی‌علمی پاسخ خواهم بخشید. بگذارید مثالی بزنم تا پیشین‌از هرچیز مداقه قضیه عکس العمل‌گرابودن یا این که نبودن تارنما‌ها بیشتر پر‌نور خواهد شد.

طراحی سایت در مشهد

رایا پارس

ahrefs

طراحی سایت

شمارا نمی‌دانم البته اینجانب با درگاه پرداخت آنلاین خزانه سامان اختلال دارم. زمانی می خواهم از سرویس ها الکترونیکی این خزانه با لپ‌تاپم استعمال کنم هیچ مشکلی وجود ندارد. اما در‌حالتی که بخواهم از گوشی وارد نت خزانه سامان نحس و کاری را اعمال دهم، عذاب‌آور میباشد. هیچ‌چیز در شیت‌ی موبایلم معین نمی شود. همیشه بایستی ورقه را گران قدر کنم که خب همین خطاها دیگری را صحیح می‌نماید. انگار نت خزانه را صرفا برای دسکتاپ ۱۳ اینچی پیاده سازی کردند.
می پندارم این تجارب‌ی تلخ را شما هم دارید. زیرا خیلی‌ از ما بیشتروقت‌ها شغل های آنلاین را با تلفن همراه یا این که تبلت جاری ساختن میدهیم. برای شما هم اتفاق افتاده که سایتی را با تلفن همراه گشوده میکنید و با خودتان میگویید: ای کاش این ورقه را گشوده نمی‌کردم! زیرا تمامی‌چیز به‌هم ریخته میباشد و هیچ المانی در شیت رمز مکان خودش وجود ندارد. میدانید ادله این به‌هم‌ریختگی چیست؟ وبسایت برخورد گرا پیاده سازی نشده میباشد.
آنچه درین نوشته خوا هیم داشت
طراحی وب سایت عکس العمل گرا (Responsive Web Design)
اصول و تکنیک های مهم در برخورد گرایی وب سایت (Website Responsiveness)
۱. Fluid Grids
۲. Fluid Images
۳. Media Query
مزیت ها و خصوصیت‌ های اینترنت طراحی صفحه ریسپانسیو
فریمورک‌‌ها و ابزارهای ساخت وب سایت برخورد گرا
مثال وب سایت ریسپانسیو
گردآوری‌‌بندی و فیض‌گیری
مولف
مهدیه اسماعیلی
طراحی وب سایت برخورد گرا (Responsive Web Design)
در حالتی که نگاهی به تاریخچه ساخت وب سایت بیندازیم، معلوم میگردد که طراحی وب هنگامی آغاز شد که تلفن همراه و تبلت و تلویزیون هوشمندی وجود نداشت. اینترنت طراحی صفحه برای دسکتاپ‌هایی با اندازه‌های معین و مشخص و معلوم اعمال میشد و مجموع. ولی خب کلیه‌ی ما می دانیم که امروز یوزرها تنها با کامپیوتر به وب وصل نمی شوند. دستگاه‌های مختلفی (تلویزیون‌ها، لپ‌تاپ‌ها، تبلت‌ها و تلفن همراه‌ها) با بعد ها متفاوت این قابلیت را به یوزرها میدهند تا به وب متصل شوند.

پس طراح و گسترش‌دهنده‌ی وب سایت بایستی به‌این نکته‌ی خیلی اساسی اعتنا نماید که سایتی که می‌سازد بایستی در دستگاه‌های متفاوت با کاغذ‌‌اکران‌هایی در بعد ها و رزولوشن‌های گوناگون اکران داده گردد. اینترنت دیزاینر چطور میتواند سایتی پیاده سازی نماید که در هر ورقه نمایشی (بسیار بلندمرتبه تا بسیار خرد) صحیح و بدون نقص اکران داده گردد؟ یعنی سایز عکس‌ها و نوشته‌ها با سایز کاغذ‌ی اکران متناسب گردد و چیزی در ورقه به‌هم نریزد؟
یک راه حل این میباشد که یک سری ورژن از یک وبسایت برای دستگاه‌های گوناگون پیاده سازی گردد. یعنی برای مثال یک ورژن برای دسکتاپ و یک ورژن برای تلفن همراه با URL مختلف. ناگفته پیداست که این‌راه‌حل پرهزینه و خیر‌چندان کاربردی میباشد. اما راه حل‌های دیگری نیز سفارش گردیده‌است که هر یک درعمل اشتباهات دیگری را ساخت و ساز می‌نمایند و ایراد را نیز تماما حل نمی‌‌نمایند. در سال ۲۰۱۰ بود که Ethan Marcotte ایده‌ای تازه را به دنیای اینترنت صفحه آرایی معرفی کرد: Responsive Design. وی ایده‌ی طراحی وب سایت ریسپانسیو را از مفهومی شبیه در معماری (Responsive Architecture) گرفته بود. ریسپانسیو‌بودن اینترنت صفحه آرایی یا این که واکشن گرا کردن وبسایت بی نقص‌ترین و شایسته ترین چاره میباشد.
[…] the concept of responsive web design (RWD) appeared, a set of practices that allows web pages to alter their layout and appearance to suit different screen widths, resolutions, etc.
مضمون‌ ساخت وب سایت برخورد گرا تیم‌ای از تکنیک‌ها را دربرمی‌گیرد که به صفحه ها اینترنت قابلیت و امکان میدهد تا دکورا سیون همگی المان‌ها و ظاهرشان را متناسب‌با پهنا‌های متفاوت برگه‌اکران، رزولوشن‌های گوناگون و… تغییر تحول دهند.
اصول و تکنیک های اصلی در عکس العمل گرایی سایت (Website Responsiveness)
پر‌نور شد که خواسته از عکس العمل گرایی وب سایت این میباشد که وبسایت (ساختار و کل المان‌های بصری آن) به محیطی (دستگاهی) که قرار میباشد در آن اکران داده خواهد شد و خصوصیت‌های خاص آن دور و اطراف برخورد آرم دهد و خودش را با آن تطبیق دهد. اصل اصلی در پیاده سازی ریسپانسیو انعطاف‌پذیری (Flexibility) میباشد. درواقع‌، گام نخستین در صفحه ارایی ریسپانسیو انعطاف‌پذیری میباشد. طراح و توسعه و گسترش‌دهنده‌ی اینترنت بایستی این‌طور تفکر نماید که تا‌جایی‌که امکانش میباشد می بایست تمامی‌چیز انعطاف‌پذیر پیاده سازی گردد.
اصل دوم این میباشد که طراح و بسط‌دهنده می بایست پیرو شایسته ترین روش‌ها و تکنیک‌هایی باشد که به پیاده سازی عکس العمل گرا یاری می‌نماید. نکته اینجاست که از سال ۲۰۱۰ تا امروز توسعه‌های متعددی در اینترنت صفحه آرایی و تکنیک‌های ما یحتاج برای ریسپانسیو‌بودن تارنما پیش آمده میباشد. این صراحت دارد که دسته تکنیک‌های اصلی در پیاده سازی عکس العمل گرا ۳ تکنیک میباشد، ولی هر طراح و پیشرفت‌دهنده‌ای براساس پروژه‌ای که دارااست می تواند و ممکن میباشد از تکنیک‌های دیگر هم استعمال نماید.
برای اینکه اینترنت صفحه ارایی واکشن گرا باشد در پیاده سازی و پیشرفت‌ی وبسایت بایستی دست کم ۳ تکنیک پایین رعایت گردیده باشد:
ریسپانسیو اینترنت صفحه آرایی
۱. Fluid Grids
در هر برگه از وبسایت المان‌های مختلفی ازجمله عکس‌ها و متون می بایست کنار هم قرار بگیرند. طرز‌ی قرارگرفتن این المان‌ها کنار هم بسیار اصلی میباشد زیرا می بایست به‌سیرتکامل‌ای باشد که محتوای متنی کاغذ خوانایی و وضوح ما یحتاج را داشته باشد. سیستم Grid مجمو‌عه‌ای از ردیف‌ها و ستون‌ها (که درون آنها containers برای قراردادن المان‌های متعدد تمجید می شود) میباشد که ساختار مهم چیدمان نصیب‌های متفاوت وب سایت را برای طراح مشخص و معلوم می‌نماید. در ساخت سایت سیستم‌های مختلفی برای گریدبندی صفحه ها وجود داراست. البته از هر سیستمی که طراح تارنما برای گریدبندی به کارگیری نماید،‌ با اندازه‌ها سروکار دارااست.
پرسش اساسی این میباشد که اندازه‌ی فونت متن ها و دیگر کلمات در کاغذ و همینطور جمله‌ها در Gridبندی کاغذ چطور تهیه و تنظیم خواهد شد تا آن ها در هر دستگاهی صحیح و بدیهی اکران داده شوند؟ در طراحی وب سایت برای معلوم‌کردن اندازه‌ها می شود از واحدهای مختلفی (pixel, percentage or ems) یاری گرفت. در پیاده سازی عکس العمل گرا نباید در گریدبندی از اندازه‌ی اثبات بهره مند شد. به‌مکان اندازه‌ی اثبات بایستی از نسبت‌ها و تبدیل‌کردن نسبت‌ها به درصد یاری گرفت. یعنی اولیه می بایست ببینیم المانی که می خواهیم اندازه‌ی آن را معلوم کنیم چه نسبتی با container‌ای که داخلش قرار میگیرد داراست. آنگاه آن نسبت را به درصد تبدیل می کنیم و به آن المان میدهیم.
۲. Fluid Images
هر عکسی که در وبسایت قرار داده می گردد اندازه‌ای داراست. اینترنت دیزاینر با‌دقت‌به کارداران متعدد به عکس‌ها اندازه می دهد. در پیاده سازی ریسپانسیو طوری بایستی به عکس‌ها اندازه بخشید که اندازه‌ی آنان در اسکرین‌های گوناگون خرد یا این که تبارک خواهد شد. برای برخورد گرایی عکس‌های وب سایت میشود از تکنیک‌های مختلفی به کار گرفت. پر اسم و رسم‌ترین و شل‌ترین تکنیک منفعت‌به دست آوردن‌از یک کد معمولی‌ی CSS برای هر عکس میباشد.
img { max-width: 100%; }
درین تکنیک برای اندازه‌دادن به عکس‌ها از اندازه‌ی اثبات استعمال نمیشود. به‌مکان آن طراح تارنما حداکثر پهنا را برای هر عکس ۱۰۰٪ قرار میدهد. این کد یعنی پهنا هر عکس ۱۰۰٪ پهنا اسکرین یا این که مرورگر باشد. پس هنگامی پهنا اسکرین یا این که مرورگر معدود گردد پهنا عکس هم به‌به عبارتی نسبت نادر میشود.
۳. Media Query
مهم ترین تکنیک در ساخت سایت برخورد گرا Media Queries در CSS میباشد. این قابلیت در CSS2 معرفی شد و در CSS3 بی نقص‌خیس شد. طراح با یاری‌دریافت کردن از تگ media@ در CSS می تواند خصوصیت‌های دستگاه‌های گوناگون (رسانه‌ها) را آزمایش نماید و براساس سود‌ی آزمایش پاره ای را برای المانی تعریف‌و‌تمجید نماید. پهنا و طول و همینطور Viewport (یه خرده از برگه‌ی اینترنت که مخاطب می‌بیند) در هر دستگاه معین میباشد. از جمله در ورقه‌اکران تلویزیون،‌ کامپیوتر یا این که لپ‌تاپ دستکم Viewport عددی معین میباشد، یعنی ۸۰۰ پیکسل. اینترنت دیزاینر قادر است طوری کد CSS را بنویسید که آغاز پهنا و طول دستگاه یا این که رزولوشن آن آنالیز خواهد شد و در حالتی‌که دست‌کم ۸۰۰ پیکسل بود، آن‌وقت المانی پاره ای مشخص و معلوم پیدا نماید (قطعه‌کد تحت).
@media screen and (min-width: 800px) {
.container {
margin: 1em 2em;
}
}
قطعه‌کد تحت نمونه دیگری برای این قابلیت و امکان بسیار کاربردی در CSS میباشد. در شرایطی که Viewport در دستگاهی که وب سایت را گشوده می‌نماید ۴۸۰ پیکسل یا این که بیشتر باشد، منو سمت چپ شیت ظواهر گردد؛ وگرنه منو در بالای محتوای کاغذ اکران داده میشود.
@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left: 216px;}
}
مزیت ها و خصوصیت‌ های اینترنت صفحه ارایی ریسپانسیو
فکرمی کنم مزیت‌های وب سایت‌های برخورد گرا تاحد متعددی مشخص و معلوم گردیده‌است. به عبارتی‌طور که اشاره شد، اینترنت دیزاینرها در دنیایی تارنما پیاده سازی می‌نمایند که هرروز در آن دستگاهی با خصوصیت‌هایی نو روانه‌ی بازار می‌گردد. علاوه‌بر دستگاه‌ها، یوزرها از مرورگرها (Google Chrome, Microsoft Edge, Mozilla Firefox , Safari , …) مختلفی به کار گیری می‌نمایند. هر مرورگر پیکربندی CSS خاص خودش را دارااست و چنانچه وبسایت عکس العمل گرا پیاده سازی نشده باشد، ممکن میباشد به‌صحت در برخی مرورگرها اکران داده نشود. پس وبسایت‌های ریسپانسیو به دور و اطراف مرورگرها هم عکس العمل نشانه می دهند.
پیاده سازی برخورد گرا نوعی‌از پندار صفحه آرایی در طراحی وب سایت میباشد. روش و نگاهی به اینترنت صفحه آرایی میباشد که کوشش تارنما را ضمانت می‌نماید. پس طراحی صفحه ریسپانسیو برای استفاده کننده، مالک وب سایت (مخصوصا تارنما‌های فروشگاهی) و گسترش‌دهنده مزایایی دارااست:
بهبود تجارب کاربری تارنما: تارنما‌ها برای هدف ها مشخصی پیاده سازی می گردند. وب سایت‌ها با هر هدفی که پیاده سازی و ساخته شوند نیاز دارا‌هستند که یوزرها از آنان بازدید نمایند. در‌حالتی که وبسایت تجارب کاربری خیر و خوبی نداشته باشد، بازدیدی هم نخواهد داشت و درنتیجه به هدفش هم نخواهد رسید.
یاری به بهینه سازی وب سایت: برای موتورهای کاوش هم عکس العمل گرایی تارنما اساسی میباشد زیرا به تجربیات کاربری ربط پیدا می‌نماید. براین اساس، سایتی که عکس العمل گرا صفحه آرایی نشده میباشد،‌ برای سئوشدن هم اختلال خواهد داشت.
صرفه‌جویی در وقت و هزینه: در شرایطی‌که قرار باشد از هر وبسایت نسخه‌های مختلفی پیاده سازی و بسط داده گردد، انگار صاحب و مالک تارنما می بایست هزینه‌ی پیاده سازی تعدادی وب سایت را بپردازد. و اینترنت دیزاینر هم بایستی برای پیاده سازی چندین تارنما فرصت بگذارد.
فریمورک‌‌ها و ابزارهای طراحی وب سایت برخورد گرا
در‌حالتی که یه خرده در تکنیک‌هایی که برای پیاده سازی ریسپانسیو ضروری میباشند توجه نمایید، متوجه میشوید که محاسبات و نسبت‌سنجی‌های متعددی داراست. پیدا‌کردن تک تک نسبت‌های صحیح و کدنویسی آن ها، مخصوصا در صورتی تعداد عکس‌ها و المان‌های صفحه های وب سایت زیاد باشد، شغل سادگی وجود ندارد. بایستی دستگاه‌های متعدد و مرورگرهای متعدد و جزئیات متعددی را درنظر گرفت.
به‌همین‌ادله، کمپانی‌های قابل انعطاف‌افزاری متعددی فریمورک‌هایی را برای شل‌ترکردن طراحی وب ریسپانسیو به بازار عرضه کردند. طراح فرانت اند براساس نوع پروژه‌‌ای که می بایست پیاده سازی نماید و همینطور شناخت‌اش با فریمورک‌ها می تواند یکی‌از را تعیین نماید. ولی مسلما مشهور‌ترین و شایسته ترین فریمورک برای اینترنت صفحه آرایی عکس العمل گرا بوت استرپ (Bootstrap) میباشد. Bulma.io فریمورک بدون‌پول و منبع گشوده دیگری برای پیاده سازی تماما ریسپانسیو میباشد که طراح را از کدنویسی CSS بی‌نیاز می‌نماید.
فریمورک ها و ابزار های پیاده سازی ریسپانسیو
درکنار فریمورک‌ها، ابزاهایی هم برای آزمایش‌کردن عکس العمل‌گرایی تارنما وجود داراست. با این ابزارها به‌راحتی می‌قدرت فهمید وب سایت ریسپانسیو پیاده سازی گردیده یا این که خیر. او‌لین و شایسته ترین ابزار Google Mobile-Friendly Test میباشد. کافی میباشد نشانی تارنما را بدین ابزار بدهید تا در یک سری دقیقه جواب را به شما بدهد. دو‌مین ابزار Chrome DevTools (Developer Tools) میباشد. کروم گروه ابزارهایی برای پیشرفت‌دهندگان اینترنت دارااست که به‌تیتر Extensions به‌راحتی به کروم افزوده میشود.
مثال وب سایت ریسپانسیو
قبلی‌از تک تک‌کردن این نوشته‌ی‌علمی، خوب میباشد مثال‌ای از تارنما برخورد گرا را باهم ببینیم. وب سایت عکس العمل‌ گرای پایین وابسته به کمبریج دیکشنری میباشد. او‌لین تصویر وبسایت را در یک اسکرین ۱۳ اینچی آرم میدهد و تصویر دوم در یک اسکرین ۴.۷ اینچی.
مثال وب سایت ریسپانسیو
مشخصات و مزیت های تارنما ریسپانسیو
برای دیدن مثال‌های بیشتر از تارنما‌های ریسپانسیو در دستگاه‌های گوناگون، پیشنهاد میکنم مطلقا به سایت Mediaqueri.es خصوصی بزنید و تصاویر چندصد وب سایت‌ برخورد گرا را در دستگاه‌های متفاوت مشاهده کنید.
اصول ساخت سایت برخورد گرا
توده‌‌بندی و فیض‌گیری
۱. ساخت سایت بایستی برخورد گرا باشد. عکس العمل گرایی با seo وب سایت رابطه دارااست و بر تجربیات کاربری و روش‌ی تعامل مخاطب با تارنما نیز اثر بدون واسطه می گذارد.
۲. در ساخت سایت ریسپانسیو همگی‌چیز به نسبت‌ها (نسبت المان‌ها بایکدیگر) و موقعیتی که المان‌ها در برگه دارا‌هستند برمی‌خواهد شد.
۳. CSS در طراحی وب عکس العمل گرا بسیار سهم داراست.
۴. پیاده سازی ریسپانسیو به عبارتی‌قدرکه اصلی میباشد ممکن میباشد مشقت بار و بغرنج هم باشد. طراح وبسایت قادر است از فریمورک‌های مختلفی امداد بگیرد و طراحی صفحه برخورد گرا را سهل وآسان‌خیس اجرا دهد.
۵. چنانچه طراح وبسایت با برخورد گرایی و تکنیک‌های آن آشنا نباشد، انگار با اینترنت صفحه ارایی آشنا وجود ندارد. به‌همین‌استدلال، در زمان پیاده سازی تارنما اصول و تکنیک‌های اصلی برای برخورد‌گرایی وبسایت و همینطور فعالیت با بوت استرپ فراگیری داده می شود.